<script setup lang="ts">
  import { h, ref } from 'vue'
  import SelectGoodType from './GoodType.vue'
  import { ElDivider } from 'element-plus'
  import { ElMessageBox } from 'element-plus'
  import { amountForamt } from '@/utils/tools'
  import _ from 'lodash'

  defineOptions({
    name: 'TableFeeStandardCreate',
  })

  // 选择产品分类弹窗显示状态
  const selectGoodTypeDrawerVisible = ref(false)

  // 间距组件的间隔符
  const spacer = h(ElDivider, {
    direction: 'vertical',
    style: 'display: flex; align-items: center;',
  })

  // 收费标准列表
  const feeStandards = ref<OrderFeeStandardDetail['feeStandardInfoVos']>([])

  /**
   * 获取工单类型下拉选项方法
   */
  const modules = ref([
    { name: '安装费', value: 1 },
    { name: '维修费', value: 2 },
    { name: '检测费', value: 3 },
    { name: '上门费', value: 4 },
    { name: '保养费', value: 5 },
  ])

  /**
   * 选择产品分类弹窗确定事件
   * @param {Array} selectedGoodTypes - 产品分类选择列表
   */
  const handleSelectGoodTypeDrawerConfirm = (selectedGoodTypes) => {
    selectedGoodTypes.forEach((selectGoodType) => {
      addFeeStandard(selectGoodType.parentId, selectGoodType.id, selectGoodType.name)
    })
  }

  /**
   * 添加服务费用标准
   * @param {String} goodsOneTypeId - 一级产品分类id
   * @param {String} goodsTwoTypeId - 二级产品分类id
   * @param {String} goodsTwoType - 二级产品分类
   */
  const addFeeStandard = (goodsOneTypeId: string, goodsTwoTypeId: string, goodsTwoType: string) => {
    feeStandards.value.push({
      goodsTwoType,
      content: '',
      customerName: '',
      goodsOneTypeId,
      goodsTwoTypeId,
      id: '',
      type: 1,
      name: '',
      price: 0,
    })
  }

  /**
   * 移除服务费用
   * @param {number} index - 索引
   */
  const removeFeeStandard = (index: number) => {
    feeStandards.value.splice(index, 1)
  }

  defineExpose({
    setData: (list: OrderFeeStandardDetail['feeStandardInfoVos']) => {
      feeStandards.value = _.cloneDeep(list)
    },
    getData: () => {
      const isName = feeStandards.value.some((o) => !o.name)
      if (isName) {
        ElMessageBox.confirm('请先输入服务项目！', '提示', {
          type: 'error',
          showCancelButton: false,
        })
        return
      }
      return _.cloneDeep(feeStandards.value)
    },
  })
</script>

<template>
  <div class="table-service-cost-standard-create-wrapper">
    <div class="title">收费标准列表</div>
    <el-table :border="true" :data="feeStandards">
      <template #empty>
        <div class="empty-container">
          <div class="text">暂无数据</div>
          <div class="btn-wrapper">
            <h-link @click="selectGoodTypeDrawerVisible = true">选择产品分类</h-link>
          </div>
        </div>
      </template>
      <el-table-column
        label="序号"
        type="index"
        width="50"
        :align="'center'"
        fixed="left"
      ></el-table-column>
      <el-table-column label="收费标准类型" width="140">
        <template #default="{ row }">
          <el-select v-model="row.type">
            <el-option
              v-for="(item, index) in modules"
              :key="index"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        label="关联产品分类"
        width="140"
        prop="goodsTwoType"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="服务项目" width="200">
        <template #default="{ row }">
          <el-input v-model.trim="row.name" placeholder="请输入服务项目" maxlength="50" />
        </template>
      </el-table-column>
      <el-table-column label="服务项目定义" width="200">
        <template #default="{ row }">
          <el-input
            v-model.trim="row.customerName"
            placeholder="请输入服务项目定义"
            maxlength="50"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="服务内容" width="300">
        <template #default="{ row }">
          <el-input v-model.trim="row.content" placeholder="请输入服务内容" maxlength="200" />
        </template>
      </el-table-column>
      <el-table-column label="保外价" width="160">
        <template #default="{ row }">
          <el-input
            v-model.trim="row.price"
            placeholder="请输入保外价"
            maxlength="11"
            @input="row.price = amountForamt(row.price)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" fixed="right">
        <template #default="{ $index }">
          <el-space :size="0" :spacer="spacer">
            <h-link type="error" @click="removeFeeStandard($index)">删除</h-link>
            <h-link v-if="$index === 0" @click="selectGoodTypeDrawerVisible = true">添加</h-link>
          </el-space>
        </template>
      </el-table-column>
    </el-table>

    <SelectGoodType
      v-model:visible="selectGoodTypeDrawerVisible"
      @confirm="handleSelectGoodTypeDrawerConfirm"
    ></SelectGoodType>
  </div>
</template>

<style scoped lang="scss">
  .table-service-cost-standard-create-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 12px;

    .title {
      font-size: 12px;
      padding-left: 6px;
      border-left: 3px solid $primaryColor;
      font-weight: bold;
    }

    :deep(.el-table__empty-text) {
      width: 100%;

      .empty-container {
        position: relative;

        .btn-wrapper {
          position: absolute;
          top: 0;
          right: 50px;
          transform: translate(50%, 0);
        }
      }
    }
  }
</style>
